<!-- The ref attr used to find the swiper instance -->
<template>
    <div class="wrap">
        <swiper :options="swiperOption" ref="mySwiper" v-if="showSwiperList">
            <!-- slides -->
            <swiper-slide v-for="item of swiperList" :key='item.id'>
                <img class="swiper-img" :src="item.imgUrl" alt="">
            </swiper-slide>
           
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
       
    </div>
  
</template>

<script>
  export default {
    name: 'carrousel',
    props:{
          swiperList:Array
    },
    data() {
      return {
        swiperOption: {
            pagination:'.swiper-pagination',
            loop:true
        }
      }
    },
    computed: {
      showSwiperList(){
        return this.swiperList.length
      }
    }
  }
</script>

<style lang="stylus" scoped>
    .wrap >>> .swiper-pagination-bullet-active
        background:#fff
    .wrap
        overflow:hidden
        height:0
        width:100%
        padding-bottom:31%
        background :#ccc
        .swiper-img
            width :100%
</style>